<template>
	<view class="page">
		<view class="u-wrap">
			<!-- 搜索框 -->
			<view class="banner"
				style="background-image: url('https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/workbanner.png');">
				<view class="banner-s">
					<u-search placeholder="搜索你想要的功能" v-model="keyword" :animation="false" :showAction="false"
						@input="autoSearch()" :clearabled="false" :customActionStyle="customActionStyle" />
				</view>
			</view>

			<!-- 内容 -->
			<view class="u-menu-wrap">
				<scroll-view scroll-y>
					<view class="toolslist" v-if="keyword.length == 0">
						<view class="toolslist-item" v-for="(item,index) in toolslist" :key="index"
							@click="gotolist(item,index)">
							<view class="toolslist-item-top">
								<image :src="item.image" mode=""></image>
								<view class="toolslist-item-bottom">
									<view class="toolslist-item-title">
										{{item.title}}
									</view>
									<view class="toolslist-item-desc">
										{{item.desc}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="toolslist" v-else>
						<view class="toolslist-item" v-for="(item,index) in newList" :key="index"
						@click="gotolist(item,index)"
						>
							<view class="toolslist-item-top">
								<image :src="item.image" mode=""></image>
								<view class="toolslist-item-bottom">
									<view class="toolslist-item-title">
										{{item.title}}
									</view>
									<view class="toolslist-item-desc">
										{{item.desc}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-popup :show="statementShows" mode="center" @close="close" :closeable="false" :closeOnClickOverlay="false"
			round="14">
			<view class="statementboxs">
				<view class="statements">
					<image src="../../static/home/nosay.png" mode=""></image>
				</view>
				<view class="statemens">
					<image src="../../static/home/jyla.jpg" mode=""></image>
				</view>
				<view class="statementtexts">
					你的账号存在违规,请联系客服解封
					如以解封，请删除重进，有五分钟缓冲时间
				</view>
				<view class="surebtnstyles">
					<view class="surebtn" @click="closer">
						联系客服
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		myShowLoading,
		myHideLoading,
	} from "../../utils/showToast.js";
	import {
		apiMixUrlKeyApi,
		apiMixUrlApi
	} from "../../api/assemb";
	import store from '../../store/idnex.js'

	export default {
		data() {
			return {
				statementShows: false,

				toolslist: [{
						title: '心得体会',
						desc: 'AI编写工作心得',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work1.png',
						id: 185,
						zt: '主题',
						tab: 0, //单一框 带字
						content: '植树节活动'
					}, {
						title: '工作总结',
						desc: '我知道你需要这个',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work2.png',
						id: 186,
						tab: 1, //1代表两行带字数
						zt: '职业',
						nr: '工作内容',
						tabs:'新能源公司',
						tablist:'年度总结报告'
					}, {
						title: '分析报告',
						desc: '提供专业的见解',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work3.png',
						id: 187,
						zt: '分析内容',
						tab: 0,
						content: '治理环境污染'
					}, {
						title: '活动方案',
						desc: '快速规划活动内容',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work4.png',
						zt: '背景',
						nr: '活动内容',
						tab: 1,
						id: 188,
						tabs:'端午节',
						tablist:'喜迎端午,划龙舟比赛'
					}, {
						title: '检讨书',
						desc: '对过错进行反思',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work5.png',
						id: 189,
						zt: '检讨书交付对象',
						nr: '检讨内容',
						tab: 2 ,//2表示不带字数的两行内容 
						tabs:'语文老师',
						tablist:'考试作弊，上课玩儿手机'
					}, {
						title: '述职报告',
						desc: '述职报告神器',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work6.png',
						id: 190,
						zt: '单位部门',
						nr: '事项描述',
						tab: 2,
						tabs:'某某县文化局',
						tablist:'推广乡村图书馆活动'
					}, {
						title: '培训总结',
						desc: '任何培训总结到位',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work7.png',
						zt: '培训内容',
						tab: 0,
						id: 191,
						content: '提高餐饮服务意识'
					},
					{
						title: '演讲稿',
						desc: '拯救社恐人群',
						image:'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work8.png',
						id: 161,
						tab: 3,
						zt: '演讲主题',
						content: '关爱空巢老人',
					}, 
					{
						title: '思想感悟',
						desc: '感悟推动自我改变',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work9.png',
						zt: '内容',
						tab: 0,
						id: 192,
						content: '学习雷锋精神'
					},
					{
						title: '月度总结',
						desc: '总结本月工作成果',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work11.png',
						tab: 1,
						id: 194,
						zt: '职位',
						nr: '主要内容',
						tabs:'汽车销售',
						tablist:'年终促销,政府补贴'

					}, {
						title: '讲话心得',
						desc: '最好的讲话心得',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work12.png',
						tab: 0,
						zt: '内容',
						id: 195,
						content: '防范电信诈骗'
					}, {
						title: 'ppt大纲',
						desc: '这是你需要的！',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work13.png',
						tab: 2,
						id: 157,
						zt: '主题',
						nr: '辅助信息',
						tabs:'健康饮食',
						tablist:'肥胖带来的危害'
					},
					//四个框不带字
					// {
					// 	title: '通知撰写',
					// 	desc: 'AI帮您秒写通知',
					// 	image:'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work14.png'
					// }, 
					{
						title: 'Excel工作表',
						desc: '轻松玩转EXCEL',
						image:'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work15.png',
						url: '/pages_aiTools/natework/natework',
					},
					{
						title: '感谢信',
						desc: '适合场景的感谢信',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work16.png',
						id: 175,
						tab: 2,
						zt: '感谢对象',
						nr: '感谢事项',
						tabs:'老师',
						tablist:'教书育人，传授知识'
					},
					{
						title: '工作感想',
						desc: '工作后的体会感想',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work17.png',
						tab: 0,
						id: 176,
						zt: '工作内容',
						content: '消防员'

					},
					{
						title: '职称总结',
						desc: '评职称工作报告',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work18.png',
						tab: 1,
						id: 177,
						zt: '个人信息',
						nr: '工作成果',
						tabs:'男,保险销售',
						tablist:'年度销售冠军,带领团队突破公司销售记录'
					},
					{
						title: '润色会议纪要',
						desc: '会议要点润色输出',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work19.png',
						tab: 3, //单一行不带字数
						zt: '大概内容',
						id: 178,
						content: '加强假期安全意识',
					},
					{
						title: '应急预案',
						desc: '紧急事件应对方案',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work20.png',
						id: 179,
						tab: 3,
						zt: '应急事项',
						content: '火灾逃生',
					},
					{
						title: '行政通知',
						desc: '标准的行政通知',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work21.png',
						id: 152,
						tab: 3,
						zt: '行政内容',
						content: '春节放假通知',
					},
					{
						title: '先进事迹',
						desc: '宣传英雄事迹',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work22.png',
						id: 180,
						zt: '姓名',
						nr: '事项描述',
						tab: 2 ,//2表示不带字数的两行内容 
						tabs:'李伟',
						tablist:'见义勇为，制服歹徒'
					},
					{
						title: '启事文书',
						desc: '引起公众的关注',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work23.png',
						zt: '启事标题',
						tab: 0, //单一框 带字
						id: 181,
						content: '寻物启事'
					
					},
					{
						title: '主要事迹',
						desc: '重点要点记录',
						image:'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work24.png',
						url: '/pages_markMoney/workdeed/workdeed',
					},
					{
						title: '入职报告',
						desc: '职员入职报告',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work25.png',
						zt: '报告标题',
						tab: 0, //单一框 带字
						id: 183,
						content:'新员工入职报告'
					},
					{
						title: '岗位事迹',
						desc: '工作中的卓越表现',
						image:'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work26.png',
						url: '/pages_markMoney/workdeed/workdeed',
					},
					{
						title: '招标书',
						desc: '招标启事通告广告',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work27.png',
						tab: 3, //单一行不带字数
						zt: '主题内容',
						id: 162,
						content:'某某区污水改造'
						
					},
					{
						title: '大会心得',
						desc: '交稿心得不用愁',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work28.png',
						id: 159,
						tab: 1, //1代表两行带字数
						zt: '会议主题',
						nr: '主要内容',
						tabs:'新能源公司',
						tablist:'年度总结报告'
					},
					{
						title: '简历制作',
						desc: '找工作更方便',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work29.png',
						tab: 3, //单一行不带字数
						zt: '描述内容',
						id: 138,
						content:'UI设计师，三年经验'
					},
					{
						title: '整改方案',
						desc: '整顿改善的方法',
						image:'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work30.png',
						url: '/pages_markMoney/method/method',
						
					},
					{
						title: '考核总结',
						desc: '标准的考核总结',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work31.png',
						id: 165,
						tab: 1, //1代表两行带字数
						zt: '考核主题',
						nr: '考核表现',
						tabs:'护士业务考核',
						tablist:'工作认真，对待病人有耐心，亲力亲为'
					},
					{
						title: '整改报告',
						desc: '对问题的纠正措施',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work32.png',
						zt: '整改问题',
						tab: 0, //单一框 带字
						id: 166,
						content:'违规摆摊整改报告'
					},
					{
						title: '转正总结',
						desc: '恭喜转正',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work33.png',
						id: 167,
						tab: 1, //1代表两行带字数
						zt: '职位',
						nr: '工作内容',
						tabs:'餐厅经理',
						tablist:'熟悉工作流程，接待客户'
					},
					{
						title: '自查报告',
						desc: '自我审查报告',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work34.png',
						id: 168,
						zt: '自查内容',
						tab: 0, //单一框 带字
						content:'反腐败'

					}, {
						title: '工作计划',
						desc: '让老板刮目相看',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work35.png',
						id: 153,
						zt: '岗位',
						nr: '工作内容',
						tab: 2 ,//2表示不带字数的两行内容 
						tabs:'新媒体运营',
						tablist:'写公众号推文'
					}, {
						title: '考察报告',
						desc: '深入全面的反馈',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work36.png',
						id: 169,
						zt: '考察内容',
						tab: 0, //单一框 带字
						content:'建设新农村'
					}, {
						title: '搜集资料',
						desc: 'AI帮您搜集信息',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work37.png',
						id: 170,
						zt: '知识领域',
						nr: '资料数量',
						tab: 2 ,//2表示不带字数的两行内容 
						tabs:'新能源汽车',
						tablist:'10'
					}, {
						title: '倡议书',
						desc: 'AI帮您写倡议书',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work38.png',
						tab: 3, //单一行不带字数
						zt: '倡议主题',
						id: 171,
						content:'保护动物'
					}, {
						title: '合同模版',
						desc: '任何合同模版都行',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work39.png',
						tab: 3, //单一行不带字数
						zt: '内容',
						id: 158,
						content:'租房合同'
					}, {
						title: '管理制度',
						desc: '公正符合的制度',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work40.png',
						id: 172,
						zt: '标题',
						tab: 0, //单一框 带字
						content:'员工规范守则'
					}, {
						title: '会议策划方案',
						desc: '大会开展方案',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work41.png',
						id: 154,
						zt: '方案主题',
						tab: 0, //单一框 带字
						content:'春节员工假期排休'
					},
					{
						title: '邮件撰写',
						desc: '写邮件太轻松',
						image:'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work42.png',
						url: '/pages_markMoney/Email/Email',
					},
					{
						title: '工作汇报',
						desc: '工作汇报不头疼',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work43.png',
						id: 156,
						zt: '岗位',
						nr: '工作',
						tab: 2 ,//2表示不带字数的两行内容 
						tabs:'产品经理',
						tablist:'绘制产品流程图'
					}, {
						title: '学习总结',
						desc: '总结学习心得',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/newxzy/work44.png',
						id: 160,
						zt: '学习内容',
						tab: 0, //单一框 带字
						content:'中学教师专业标准'
					}
				],
				newList: '',
				keyword: ''
			}
		},
		onShareAppMessage(res) {
			const that = this
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target, 'res.target')
			}
			return {
				title: 'AI写作神器，一键改写变原创。',
				path: "pages/home/home?userid=" + that.userid,
				imageUrl: "https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/xze/6.png",
				success: function(res) {
					console.log(
						"--------------转发成功--------------------",
						res,
						that.userid
					);
				}
			}
		},
		onLoad() {

		},
		onShow() {
			if (uni.getStorageSync('ban')) {
				this.statementShows = true;
			} else {
				this.statementShows = false;
			}
		},
		methods: {
			gotolist(item, index) {

				if (item.tab == 0) {
					uni.navigateTo({
						url: '/pages_markMoney/rectification/rectification?title=' + item.zt + '&footer=' + item
							.title + '&id=' + item.id + '&content=' + item.content,
					})
                 }else if(item.tab == 1){
					 console.log('1')
					 uni.navigateTo({
					 	url: '/pages_markMoney/assembly/assembly?title=' + item.zt + '&footer=' + item
					 		.title + '&id=' + item.id + '&content=' + item.tablist + '&tab=' + item.tabs
							+ '&nr=' + item.nr,
					 })
				 }else if(item.tab == 2){
					 uni.navigateTo({
					 	url: '/pages_markMoney/invitation/invitation?title=' + item.zt + '&footer=' + item
					 		.title + '&id=' + item.id + '&content=' + item.tablist + '&tab=' + item.tabs
					 		+ '&nr=' + item.nr,
					 })
				 }else if(item.tab == 3){
					 console.log('3')
					 uni.navigateTo({
					 	url:'/pages_markMoney/peoper/peoper?title=' + item.zt + '&footer=' + item
					 		.title + '&id=' + item.id + '&content=' + item.content,
					 })
				 }else if(item.url){
					 uni.navigateTo({
					 	url:item.url
					 })
				 }
				console.log(item)
			},
			autoSearch() {
				this.newList = ''
				let that = this
				let cont = this.toolslist

				var arr = []; //定义数组
				for (var i in cont) {
					arr.push(cont[i]);
				}
				var list2 = [];
				var list3 = [];
				arr.forEach((item1, index) => {
					if (that.keyword == '') {
						return
					}
					if (item1.title.indexOf(that.keyword) >= 0) {
						list2.push(item1);
						list3.push(index)
						console.log(true)
						this.newList = list2
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style lang="scss" scoped>
	/deep/.u-search__content {
		height: 82rpx !important;
		border-color: #fff !important;
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/.u-search__content__input {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.banner {
		background-repeat: no-repeat;
		background-size: cover;
		top: 0;
		height: 356rpx;
		width: 100%;

		.banner-s {
			width: 650rpx;
			margin: 0 auto;
			margin-top: 240rpx;
		}
	}

	.topsize {
		background-color: #F5F5F5;
		width: 100%;
		flex: 1;
		display: flex;
		overflow: hidden;
		padding-bottom: 30rpx;
		padding-top: 360rpx;
		z-index: -1;
	}

	.toolslist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.toolslist-item {
			width: 338rpx;
			height: 151rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			margin-top: 20rpx;

			.toolslist-item-top {
				margin-left: 24rpx;
				display: flex;
				align-items: center;
				margin-top: 32rpx;

				image {
					width: 97rpx;
					height: 97rpx;
					margin-right: 17rpx;
				}

				.toolslist-item-bottom {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;

					.toolslist-item-title {
						font-size: 29rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
					}

					.toolslist-item-desc {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
		background: #F5F5F5;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
		margin: 0 26rpx;
		padding-bottom: 30rpx;
	}
	.statementboxs {
		width: 620rpx;
		// height: 572rpx;
	
		.statements {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;
	
			image {
				width: 114rpx;
				height: 114rpx;
			}
		}
	
		.statemens {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;
	
			image {
				width: 220rpx;
				height: 66rpx;
			}
		}
	
		.statementtexts {
			// margin-left: 300rpx;
			font-size: 26rpx;
			margin-top: 60rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 0 115rpx;
			margin-top: 58rpx;
			margin-bottom: 48rpx;
		}
	
		.surebtnstyles {
			display: flex;
			justify-content: center;
	
			.surebtn {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				width: 440rpx;
				height: 117rpx;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url("https://mysmallapp.oss-cn-shanghai.aliyuncs.com/aixz/img/xzybg.png");
			}
		}
	}
	
	.statementbox {
		width: 620rpx;
		height: 572rpx;
	
		.statement {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;
	
			image {
				width: 114rpx;
				height: 55rpx;
			}
		}
	
		.statementtext {
			font-size: 25rpx;
			margin-top: 60rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 0 70rpx;
			margin-top: 58rpx;
			margin-bottom: 48rpx;
		}
	
		.surebtnstyle {
			display: flex;
			justify-content: center;
	
			.surebtn {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				width: 440rpx;
				height: 117rpx;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url("https://mysmallapp.oss-cn-shanghai.aliyuncs.com/aixz/img/xzybg.png");
			}
		}
	}
</style>